<template>
  <div>
    <div>
      <el-menu class="sub-menu" mode="horizontal" :default-active="TaskActiveRouter" router>
        <el-menu-item index="Activity" :route="{name:'ActivityList'}" class="el-icon-coin">活动管理</el-menu-item>
        <el-menu-item index="Promo" :route="{name:'Promo'}" class="el-icon-data-analysis">推广码</el-menu-item>
        <el-menu-item index="Stat" :route="{name:'Stat'}" class="el-icon-document">数据统计</el-menu-item>
        <el-menu-item index="Fans" :route="{name:'Fans'}" class="el-icon-setting">参与粉丝</el-menu-item>
      </el-menu>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "TaskLayout",
  data() {
    return {
      TaskActiveRouter: '',
    }
  },
  mounted() {
    this.TaskActiveRouter = this.$route.matched[2].name;
  },
  watch: {
    $route: function (to) {
      this.TaskActiveRouter = to.matched[2].name;
    }
  }
}
</script>

<style scoped>
.sub-menu .el-menu-item {
  line-height: 40px;
  height: 40px;
  vertical-align: middle;
  font-size: 13px;
}

.sub-menu .el-menu-item i {
  margin-top: -3px;
}
</style>